<template>
	<view class="home">
		<cmd-nav-bar :fixed="true" back left-text="添加宠物" right-text="" title="" font-color="black" background-color="#ffffff"></cmd-nav-bar>
		<view class="mo_ban"></view>
		<view class="score_">
			<view class="score_header">
				<img class="home_img" :src="image_upload" alt="">
			</view>
		</view>
		<view class="item_">
			<text class="item_name">宠物昵称</text>
			<input class=" item_inp" placeholder="请输入宠物昵称" />
		</view>
		<view class="item_">
			<text class="item_name">宠物性别</text>
				<picker class="item_inp chu_s" @change="GenderChange" :value="index" :range="Gender">
				<view class="uni-input">{{Gender[index]}}</view>
			</picker>
		</view>
		<view class="item_">
			<text class="item_name">宠物品种</text>
			<input class=" item_inp" placeholder="请输入品种" />
		</view>
		<view class="item_">
			<text class="item_name">出生日期</text>
			<picker class="item_inp chu_s" mode="date" placeholder="请输入品种" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<view class="item_">
			<text class="item_name">绝育状态</text>
			<picker class=" item_inp chu_s" @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
		</view>
		<view class="item_">
			<text class="item_name">宠物体重</text>
			<input class=" item_inp" placeholder="请输入宠物体重" />
		</view>
		<button class="add_baocun" type="primary">保存</button>
	</view>
</template>
<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import image_upload from '@/static/home/ic_image_upload.png'
	// ic_image_upload
	export default {
		props: {},
		components: {
			cmdNavBar
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				image_upload,
				title: 'picker',
				Gender:['GG','MM'],
				array: ['绝育', '未绝育'],
				index: 0,
				date: currentDate,
				time: '12:01'
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
					bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			GenderChange:function(e){
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
		
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100%;
	}

	.mo_ban {
		width: 100%;
		height: 92upx;
	}

	.score_ {
		width: 100%;
		height: 350upx;
		padding-top: 30px;
		background: white;

		.score_header {
			width: 150upx;
			height: 150upx;
			// margin-top:60upx;
			margin: 60upx auto auto auto;

			.home_img {
				width: 150upx;
				height: 150upx;
				background-size: 100% 100%;
				display: block;
				// margin: 20upx auto auto auto;
				border-radius: 50%;

			}
		}
	}

.chu_s{
	margin-right: 18%;
}

	.item_ {
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #e2e2e2;
		background: white;

		text {
			width: 40%;
			height: 100%;
			line-height: 100upx;
			margin-left: 3%;
			display: block;
			float: left;
		}

		.item_inp {
			height: 100%;
			float: right;
		}
	}

	.add_baocun {
		width: 80%;
		margin: 30upx auto auto auto;
	}
	.font_class{
		
	}
</style>
